<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>WebSocket Client</title>
    <script src="js/chart.js/Chart.bundle.js"></script>
    <script src="js/chart.js/samples/utils.js"></script>

        <script type="text/javascript">
            var ws = new WebSocket("ws://" + window.location.host + "/example");

            ws.onopen = function() {
                var status = document.getElementById("status");
                status.innerHTML = "Web Socket is connected!";
            };

            ws.onmessage = function (evt) {
                var msg = evt.data;
                var last_message = document.getElementById("last_message");
                // last_message.innerHTML = "Last message: " + msg;

                var record = JSON.parse(msg);
                salesPriceData.set(record["category"], record["accumulated-sales"]);

                barChartData.labels = Array.from( salesPriceData.keys() );
                barChartData.datasets[0].data = Array.from( salesPriceData.values() );

                eventCount++;
                event_count.innerHTML = "Total events received: " + eventCount;

                window.myBar.update();
            };

            ws.onclose = function() { 
                var status = document.getElementById("status");
                status.innerHTML = "Connection is closed.";
            };
         </script>
    <style>
    canvas {
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
    }
    </style>
</head>

<body>
    <div id="container" style="width: 75%;">
        <canvas id="canvas"></canvas>
    </div>
    <script>
        var color = Chart.helpers.color;
        var salesPriceData = new Map();
        var eventCount = 0;

        var barChartData = {
            labels: [],
            datasets: [{
                label: 'Sales Per Category',
                backgroundColor: color(window.chartColors.blue).alpha(0.5).rgbString(),
                borderColor: window.chartColors.blue,
                borderWidth: 1,
                data: []
            }]
        };

        window.onload = function() {
            var ctx = document.getElementById('canvas').getContext('2d');
            window.myBar = new Chart(ctx, {
                type: 'bar',
                data: barChartData,
                options: {
                    responsive: true,
                    legend: {
                        position: 'top',
                    },
                    title: {
                        display: true,
                        text: 'Change Events WebSockets Demo'
                    },
                    scales: {
                            yAxes: [{
                                ticks: {
                                    suggestedMin: 0,
                                    suggestedMax: 1400
                                }
                            }]
                        }
                }
            });

        };
    </script>

    <p id="status">Connection is closed.</p>
    <p id="event_count"></p>
    <p id="last_message"></p>
</body>

</html>
